<template>
  <div class="msg">
    <main>
      <form :model="msg">
        <h2>发布留言</h2>
        <label for="name">姓名：</label>
        <input type="text" v-model="msg.name" name="name" id="name" required />
        <label for="message">留言内容：</label>
        <textarea name="message" v-model="msg.message" id="message" required></textarea>
        <input type="submit" @click.prevent="onSubmit" value="提交" />
      </form>
      <section>
        <h2>留言列表</h2>
        <ul id="message-list">
          <!-- 留言内容通过JavaScript动态添加 -->
        </ul>
      </section>
    </main>
    <iframe id="iframe" src="http://as18/test.html"></iframe>
    <footer>
      <p>&copy; 2021 留言板</p>
    </footer>
  </div>
</template>
<script setup>
import { reactive, onMounted } from 'vue'
const msg = reactive({
  name: '',
  message: ''
})
onMounted(() => {
  window.addEventListener(
    'message',
    (e) => {
      let res = JSON.parse(e.data)
      alert(res.status)
      //if (e.origin === 'http://b.index.com') {
      console.log(e.origin) //子页面URL，这里是http://b.index.com
      console.log(e.source) // 子页面window对象，全等于iframe.contentWindow
      //console.log(e.data) //子页面发送的消息
      //}
    },
    false
  )
})
const onSubmit = () => {
  var iFrame = document.getElementById('iframe')
  var data = { type: 'post', url: 'http://as18/api/Test/login', data: msg }
  iFrame.contentWindow.postMessage(JSON.stringify(data), '*')
}
</script>
<style>
.msg {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #444;
}

header {
  background-color: #0072c6;
  color: #fff;
  padding: 20px;
}

header h1 {
  font-size: 36px;
  margin: 0;
}

main {
  margin: 20px;
}

form h2 {
  margin-bottom: 10px;
}

form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

form textarea {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

form textarea {
  min-height: 100px;
  resize: vertical;
}

form input[type='submit'] {
  background-color: #0072c6;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 3px;
  cursor: pointer;
}

form input[type='submit']:hover {
  background-color: #005daa;
}

section {
  background-color: #f7f7f7;
  padding: 20px;
  border-radius: 5px;
}

section h2 {
  margin-bottom: 10px;
}

#message-list li {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #d6d6d6;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

footer {
  background-color: #444;
  color: #fff;
  padding: 10px;
  text-align: center;
}

footer p {
  margin: 0;
}
</style>
